<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>
<body>
<div>
    <div style="width:800px;margin:0 auto">

        <div style="float: left;width:10%;">

        </div>

    </div>
    <br/>
    <div style="width:800px;margin:0 auto" align="center">
        <ul class="pagination pagination-sm" >
            <li><a href="/" class="glyphicon glyphicon-home" title="返回主页"></a></li>
            <li><a href="/infoAdmin/add" class="glyphicon glyphicon-plus" title="新增"></a></li>
        </ul>
    </div>
    <table  style="width:800px;margin:0 auto" width="400"  class="table table-hover">
        <thead>
        <tr class="active">
            <th >编号</th>
            <th >操作</th>
            <th >标题</th>
            <th >副标题</th>
        </tr>
        </thead>
        <!-- 此方法引用博客 http://www.jb51.net/article/57864.htm
         这篇 博客中的index.ejs中出现这个遍历数据的方法-->
        <tbody id="ec_table" >
        <% if (datas.length) { %>
        <% datas.forEach(function(infos){ %>
        <tr >
            <td ><%= infos.id %></td>
            <td >
                <a href="/infoAdmin/view/<%= infos.id %>" class="glyphicon glyphicon-zoom-in" title="查看详情"></a>&nbsp;&nbsp;
                <a href="/infoAdmin/del/<%= infos.id %>" class="glyphicon glyphicon-remove" title="删除"></a>&nbsp;&nbsp;
                <a href="/infoAdmin/toUpdate/<%= infos.id %>" class="glyphicon glyphicon-edit" title="修改"></a>
            </td>
            <td ><%= infos.title %></td>
            <td ><%= infos.info %></td>
        </tr>
        <% }) %>
        <% } %>
        </tbody>
    </table>
    <div style="width:800px;margin:0 auto" width="400" border="1" cellspacing="0" align="center">
        <span id="spanFirst" >第一页</span>
        <span id="spanPre">上一页</span>
        <span id="spanNext">下一页</span>
        <span id="spanLast">最后一页</span> 第
        <span id="spanPageNum"></span>页/共
        <span id="spanTotalPage"></span>页

    </div>

    <script>
        var theTable = document.getElementById("ec_table");
        var totalPage = document.getElementById("spanTotalPage");
        var pageNum = document.getElementById("spanPageNum");
        var spanPre = document.getElementById("spanPre");
        var spanNext = document.getElementById("spanNext");
        var spanFirst = document.getElementById("spanFirst");
        var spanLast = document.getElementById("spanLast");
        var numberRowsInTable = theTable.rows.length;
        var pageSize = 5;
        var page = 1;
        //下一页
        function next() {
            hideTable();
            currentRow = pageSize * page;
            maxRow = currentRow + pageSize;
            if (maxRow > numberRowsInTable)
                maxRow = numberRowsInTable;
            for ( var i = currentRow; i < maxRow; i++) {
                theTable.rows[i].style.display = '';//currentRow ~ maxRow 内显示出来
            }
            page++;
            if (maxRow == numberRowsInTable) {
                nextText();
                lastText();
            }
            showPage();
            preLink();
            firstLink();
        }
        //上一页
        function pre() {
            hideTable();
            page--;
            currentRow = pageSize * page;
            maxRow = currentRow - pageSize;
            if (currentRow > numberRowsInTable)
                currentRow = numberRowsInTable;
            for ( var i = maxRow; i < currentRow; i++) {
                theTable.rows[i].style.display = '';
            }
            if (maxRow == 0) {
                preText();
                firstText();
            }
            showPage();
            nextLink();
            lastLink();
        }
        //第一页
        function first() {
            hideTable();
            page = 1;
            for ( var i = 0; i < pageSize; i++) {
                theTable.rows[i].style.display = '';
            }
            showPage();
            preText();
            nextLink();
            lastLink();
        }
        //最后一页
        function last() {
            hideTable();
            page = pageCount();
            currentRow = pageSize * (page - 1);
            for ( var i = currentRow; i < numberRowsInTable; i++) {
                theTable.rows[i].style.display = '';
            }
            showPage();
            preLink();
            nextText();
            firstLink();
        }
        function hideTable() {
            for ( var i = 0; i < numberRowsInTable; i++) {
                theTable.rows[i].style.display = 'none';
            }
        }
        function showPage() {
            pageNum.innerHTML = page;
        }
        //总共页数
        function pageCount() {
            var count = 0;
            if (numberRowsInTable % pageSize != 0)
                count = 1;
            return parseInt(numberRowsInTable / pageSize) + count;
        }

        //显示链接
        function preLink() {
            spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>";
        }
        function preText() {
            spanPre.innerHTML = "上一页";
        }
        function nextLink() {
            spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>";
        }
        function nextText() {
            spanNext.innerHTML = "下一页";
        }
        function firstLink() {
            spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>";
        }
        function firstText() {
            spanFirst.innerHTML = "第一页";
        }
        function lastLink() {
            spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>";
        }
        function lastText() {
            spanLast.innerHTML = "最后一页";
        }
        //隐藏表格
        function hide() {
            for ( var i = pageSize; i < numberRowsInTable; i++) {
                theTable.rows[i].style.display = 'none';
            }
            totalPage.innerHTML = pageCount();
            pageNum.innerHTML = '1';
            nextLink();
            lastLink();
        }
        hide();
    </script>



</div>

</body>
</html>
